<template>
    <el-container class="source-container" direction="vertical">
        <el-container>
            <JobFilterBtnGroup ref="btnGroup" @handleClick="handleHeaderClick" :config="headerConfig"
                :specific="specific" :whereDict="whereDict">
            </JobFilterBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table ref="sourceTable" :data="targets" v-loading="loadingShow"
                    @selection-change="handleSelectionChange">
                    <el-table-column fixed label="序号" type="selection" prop="id"></el-table-column>
                    <el-table-column label="标题">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.title" v-if="row.title.length > maxLength">{{
                ellipsisContent(row.title) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.title" v-else>{{ row.title }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接" width="80px">
                        <template slot-scope="{ row }">
                            <el-link type="primary" underline>点击链接</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.aiResult" v-if="checkLength(row.aiResult)">{{
                ellipsisContent(row.aiResult) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.aiResult" v-else>{{ row.aiResult }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="80px" prop="status">
                        <template slot-scope="{ row }">
                            <span>{{ showStatusDesc(row.status) }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
    </el-container>
</template>

<style lang="scss">
.source-container {

    .radio-container {
        margin-left: 0px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                margin-left: 20px;
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }

    li {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}
</style>

<script>
import { ArticleDao } from "@/dao/articleDao"
import { ArticleStatus } from "@/entities/Constant"
import { funcFns } from '@/puppeteer/utils/funtion'
import { JobFilterBtnMixin } from "@/mixins/JobFilterBtnMixin"
//组件
import JobFilterBtnGroup from "@/components/Common/JobFilterBtnGroup"

export default {
    name: "PublishJobSource",
    mixins: [JobFilterBtnMixin],
    props: {
        jobSource: {
            type: String,
            default: "{}"
        }
    },
    components: {
        JobFilterBtnGroup,
    },
    data() {
        return {
            targets: [],
            maxLength: 150,
            loadingShow: true,
            specific: {
                is: false,
                ids: [],
            },
            whereDict: { "status": [2, 3] },
            headerConfig: {
                add: false,
                refresh: false,
                pageSize: 5,
                statusBtns: [
                    { status: 2, name: "已生成", key: "status" },
                    { status: 3, name: "已发布", key: "status" },
                ]
            },
        }
    },
    mounted() {
        this.getWhereDict()
        this.getTargets(this.page)
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            ArticleDao.fetchCount(this.whereDict, page, this.headerConfig.pageSize).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
                this.handleSpecificIdsSelected()
            })
        },
        handleStatusFilter(row) {
            this.getTargets(this.page)
        },
        handleSpecificIdsSelected() {
            let tableDatas = []
            for (let target of this.targets) {
                if (this.specific.ids.includes(target.id)) {
                    tableDatas.push(target)
                }
            }
            this.$nextTick(() => {
                tableDatas.forEach(row => {
                    this.$refs.sourceTable.toggleRowSelection(row, true);
                });
            })
        },
        getWhereDict() {
            if (this.jobSource.length > 2) {
                let source = JSON.parse(this.jobSource)
                this.specific = source.specific
                this.whereDict = source.whereDict
            } else {
                this.whereDict = this.handleInitialWhere()
            }
        },
        clearTableSelection() {
            this.$refs["sourceTable"].clearSelection()
        },
        showStatusDesc(status) {
            let obj = ArticleStatus.Options().find(obj => obj.id == status)
            return obj ? obj.name : ""
        },
        checkLength(content) {
            if (!content) {
                return false
            }
            if (content.length < this.maxLength) {
                return false
            }
            return true
        },
        ellipsisContent(content) {
            return funcFns.ellipsisContent(content, this.maxLength)
        },
    },
}
</script>
